<template>
  <el-dialog v-model="dialogVisible" :destroy-on-close="true" width="650px" :title="`${dialogVProps.title}门店`">
    <el-form
      ref="ruleFormRef"
      label-width="100px"
      label-suffix=" :"
      :rules="rules"
      :disabled="dialogVProps.isView"
      :model="dialogVProps.row"
      :hide-required-asterisk="dialogVProps.isView"
    >
      <el-form-item label="门店名称" prop="storeName">
        <el-input v-model="dialogVProps.row!.storeName" clearable></el-input>
      </el-form-item>
      <el-form-item label="门店联系人" prop="linkMan">
        <el-input v-model="dialogVProps.row!.linkMan" clearable></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="mobile">
        <el-input v-model="dialogVProps.row!.mobile" clearable></el-input>
      </el-form-item>
      <el-form-item label="商户编号" prop="payAccount">
        <el-input v-model="dialogVProps.row!.payAccount" clearable></el-input>
      </el-form-item>
      <el-form-item label="所属区域" prop="areaObject">
        <el-cascader class="w100" v-model="dialogVProps.row!.areaObject" :options="AreaList" :props="CasProps"></el-cascader>
      </el-form-item>
      <el-form-item label="门店地址" prop="address">
        <el-input v-model="dialogVProps.row!.address" clearable></el-input>
      </el-form-item>
      <el-form-item label="所属行业" prop="industryId">
        <!-- <el-select class="w100" v-model="dialogVProps.row!.industryId" placeholder="请选择行业">
              <el-option v-for="item in industryList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select> -->
        <el-cascader
          style="width: 100%"
          disabled
          check-strictly
          :props="{ label: 'name', value: 'id', emitPath: false }"
          v-model="dialogVProps.row!.industryId"
          :options="industryList"
        />
      </el-form-item>
      <!-- <el-form-item label="启用状态" prop="status">
        <el-radio-group v-model="dialogVProps.row!.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="2">停用</el-radio>
        </el-radio-group>
      </el-form-item> -->
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false"> 取消 </el-button>
      <el-button v-show="!dialogVProps.isView" type="primary" @click="handleSubmit"> 确定 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="storeDrawer">
import { Login, Operation } from "@/api/interface";
import { getStoreTypeListAPI } from "@/api/modules/login";
import AreaList from "@/assets/json/pcaCode.json";
import { ElMessage, FormInstance } from "element-plus";
import { reactive, ref } from "vue";

const rules = reactive({
  storeName: [{ required: true, message: "门店名称必填" }],
  address: [{ required: true, message: "门店地址必填" }]
});
const industryList = ref<Login.StoreTypeList[]>([]);
const getStoreTypeList = async () => {
  const res = await getStoreTypeListAPI({});
  industryList.value = res.data;
};

interface DialogVProps {
  title: string;
  isView: boolean;
  row: Partial<Operation.ResDepartmentList>;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
}

const dialogVisible = ref(false);
const dialogVProps = ref<DialogVProps>({
  isView: false,
  title: "",
  row: {}
});
const CasProps = ref({ label: "name", value: "code" });
// 接收父组件传过来的参数
const acceptParams = (params: DialogVProps) => {
  dialogVProps.value = params;
  dialogVisible.value = true;
  getStoreTypeList();
};

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      await dialogVProps.value.api!(dialogVProps.value.row);
      ElMessage.success({ message: `${dialogVProps.value.title}门店成功！` });
      dialogVProps.value.getTableList!();
      dialogVisible.value = false;
    } catch (error) {
      console.log(error);
    }
  });
};

defineExpose({
  acceptParams
});
</script>
